<template>
    <div class="supplier-select" v-if="api">
        <SearchInput
            v-model="selectValue"
            :api="api"
            :searchKey="typeSelect"
            :placeholder="placeholder"
            :disabled="disabled"
            :all="all"
            :selectLabel="typeSelect"
            selectWidth="300px"
            suffix="el-icon-more"
            @iconClick="openTable"
        >
            <template #searchItem="item">
                <span class="text-ellipsis line" v-if="typeSelect == 'supplierName' ">
                    <span>{{ item.data.supplierId }}</span>
                    <span> {{ item.data.supplierName }}</span>
                </span>
                <span class="text-ellipsis line"  v-else-if="typeSelect == 'nickName' ">
                    <span>{{ item.data.userId }}</span>
                    <span> {{ item.data.nickName }}</span>
                </span>
                <span class="text-ellipsis line" v-else-if="typeSelect == 'customerName' ">
                    <span>{{ item.data.customerId }}</span>
                    <span> {{ item.data.customerName }}</span>
                </span>
            </template>
        </SearchInput>

        <!-- 展开的表格 -->
        <el-dialog
            :visible.sync="table.show"
            :before-close="tableClose"
            :modal-append-to-body="true"
            :append-to-body="true"
            width="80%"
            :close-on-click-modal="false"
            @cancelClick="handleCancelDialog"
        >
        <SupplierTable v-if="typeSelect == 'supplierName' "/>
        <SalesTable v-else-if="typeSelect == 'nickName' "/>
        <CustomerTable v-else-if="typeSelect == 'customerName' "/>

            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="table.show = false"
                    >确 定</el-button
                >
            </span>
        </el-dialog>
    </div>
</template>

<script>
import SearchInput from "@/components/SearchInput";
import SupplierTable from "./supplierTable.vue";
import SalesTable from "./salesTable.vue";
import CustomerTable from "./customerTable.vue";

export default {
    components: {
        SearchInput,
        SalesTable,
        CustomerTable,
        SupplierTable,
    },
    props: {
        value: String,
        placeholder: String,
        disabled: {
            type: Boolean,
            default: false,
        },
        all: {
            type: Boolean,
            default: true,
        },
        typeSelect:  {
            type: String,
            default: 'supplierName',
        },
        // api: Function,
    },
    data: () => {
        return {
            selectValue: "",
            table: {
                show: false,
                data: [],
                loading: true,
                params: {
                    pageNum: 1,
                    pageSize: 10,
                    supplierType: "",
                    supplierName: "",
                },
                total: 0,
            },
            
            supplierCategory: [],
            api:null,
        };
    },
    created() {

        this.api = this.$Api.supplier.info.list;
        // this.getSupplierCategory();
        if( this.typeSelect == "customerName"){
            this.api = this.$Api.customer.list;
            }
        if( this.typeSelect == "nickName" ) {
            this.api = this.$Api.user.list;
        }
        
    },
    watch: {
        value(v) {
            this.selectValue = v;
        },
        selectValue(v) {
            this.$emit("input", v);
        },
    },
    methods: {
        /** 查询列表 */
        getList(params) {
            this.$refs.Table.getData(params);
        },
   
        openTable() {
            if (this.disabled) return false;

            this.table.show = true;
    
        },
    
        handleCancelDialog(val){
            this.selectValue = val;
            this.tableClose()
        },
        tableClose() {
            this.table.show = false;
        },
    },
};
</script>

<style lang="scss" scoped>
::v-deep.supplier-select {
    .el-dialog__wrapper,
    .v-modal {
        left: unset;
        right: 0;
        z-index: 1000;
        width: 100%;
    }

    .el-form {
        display: flex;
    }

    .el-table {
        margin-top: 15px;
        table {
            td {
                padding: 0;
                height: 35px;
                border-left: 1px solid #eaeaea;
                border-right: 1px solid #eaeaea;
                & + td {
                    border-left: none;
                }
            }
        }
    }
    .el-input--medium .el-input__inner {
        height: 32px;
        line-height: 32px;
    }
}
</style>